<template>
	<view class="content">
		<view class="" style="position: fixed;height: 1rpx;background-color: #E9E9E9;width: 100%;top: 0;">
			
		</view>
		<view class="main_up">
			<view class="glp" v-if="orderInfo.orderType==2">
				<view class="deliver_info">
					<text>发货人: </text><text class="go_name">{{orderInfo.shipUser}}</text><text
						class="go_phone">{{orderInfo.shipTel}}</text>
				</view>
				<view class="dizhi">
					{{orderInfo.shipProvince}}{{orderInfo.shipCity}}{{orderInfo.shipArea}}{{orderInfo.shipAddress}}
				</view>
			</view>
			<view class="glp" v-if="orderInfo.orderType==1">
				<view class="deliver_info">
					<text>发货人: </text><text class="go_name">{{orderInfo.billerMerchant}}</text><text
						class="go_phone">{{orderInfo.billerPhone}}</text>
				</view>
				<view class="qhdz" v-if="orderInfo.isPickup==1">
					{{orderInfo.billerAddress}}
				</view>

			</view>
		</view>


		<view class="main_up">
			<view class="glp" v-if="orderInfo.orderType==2">
				<view class="deliver_info">
					<text>收货人:</text><text class="go_name">{{orderInfo.deliveryUser}}</text><text
						class="go_phone">{{orderInfo.deliveryTel}}</text>
				</view>
				<view class="dizhi" v-if="orderInfo.deliveryProvince">
					{{orderInfo.deliveryProvince}}{{orderInfo.deliveryCity}}{{orderInfo.deliveryArea}}{{orderInfo.deliveryAddress}}
				</view>
				<view class="dizhi" v-else>
					{{orderInfo.deliveryAddress}}
				</view>
			</view>

			<view class="glp" v-else-if="orderInfo.orderType==1">
				<view class="">
					<view class="qcfd">
						<view class="fl"
							style="width: 12rpx;height: 12rpx;border-radius: 16rpx;background-color: #2577FF;margin-top: 24rpx;margin-right:8rpx ;">
						</view>
						<view class="fl gnm">{{orderInfo.shipUser?orderInfo.shipUser:'--'}}
							{{orderInfo.shipTel?orderInfo.shipTel:'--'}}</view>

					</view>
					<view class="" style="margin-left: 20rpx;">
						{{orderInfo.shipAddress}}
					</view>
				</view>
				<view class="" style="margin-top: 20rpx;margin-bottom: 18rpx;">
					<view class="qcfd">
						<view class="fl"
							style="width: 12rpx;height: 12rpx;border-radius: 16rpx;background-color: #FF690D;margin-top: 24rpx;margin-right:8rpx ;">
						</view>

						<view class="fl gnm">{{orderInfo.deliveryUser?orderInfo.deliveryUser:'--'}}
							{{orderInfo.deliveryTel?orderInfo.deliveryTel:'--'}}</view>
					</view>

					<view class="" style="margin-left: 20rpx;">

						{{orderInfo.deliveryAddress}}
					</view>
				</view>

			</view>

			<view class="line">

			</view>
			<view class="ddxx">
				<view class="qcfd">
					<view v-if="orderInfo.orderType==2">
						取货地址: {{orderInfo.pickAddress}}
					</view>
					<view class="fl">
						订单号: {{orderInfo.ordername}}
					</view>
					<view v-if="orderInfo.payer==1" class="fr">
						付款方式: 寄付
					</view>
					<view v-else class="fr">
						付款方式: 到付
					</view>
				</view>
				<view class="qcfd">
					<view class="fl">
						下单时间: {{orderInfo.ordertime}}
					</view>
					<view v-if="orderInfo.isPickup==1&&orderInfo.orderType==2" class="fr">
						上门取货
					</view>
				</view>
				<view class="qcfd">
					<view class="fl" v-if="orderInfo.expectePickTime">
						期望取货时间: {{jt}} {{stime}}
					</view>
				</view>
				<view class="qcfd">
					<view v-if="false" class="fl">
						预计
					</view>
				</view>
			</view>
		</view>

		<view class="main_mid">
			<view class="deliver_info">
				<text>件数: </text><text class="go_name"> {{orderInfo.qty}}件</text>
			</view>
			<view class="lines">

			</view>
			<view class="deliver_info">
				<text>货物名称: </text><text v-if="orderInfo.goodsName" class="go_name"> {{orderInfo.goodsName}}</text>
			</view>
			<view class="lines">

			</view>
			<view class="deliver_info">
				<text>物流公司: </text><text class="go_name">
					{{orderInfo.orderType==1?orderInfo.inCpname:orderInfo.outCpname}}</text>
			</view>
		</view>

		<view class="main_mid">
			备注: <text>{{orderInfo.memo?orderInfo.memo:''}}</text>
		</view>

		<view :class="[status1.indexOf(orderInfo.status)>-1?'main_down':'main_downs']">
			<view class="ddgz" style="margin-bottom: 20rpx;">
				订单跟踪
			</view>
			
			<uni-steps :options="step"  :optionss="imgpick"  :optiones="imgsign" direction="column" active="0"></uni-steps>

		</view>



		<view class="deliver_in qcfd" v-if="status1.indexOf(orderInfo.status)>-1">
			<button v-if="status1.indexOf(orderInfo.status)>-1&&orderInfo.orderType==2" class="qxdd fr"
				@click="cancleOrder" type="default">取消订单</button>
			<button v-if="status1.indexOf(orderInfo.status)>-1&&orderInfo.orderType==1" class="qxdd fr"
				@click="cancleOrder" type="default">取消订单</button>
			
		</view>
		
	</view>


</template>

<script>
	import moment from 'moment';
	// import vu
	export default {
		data() {
			return {
				orderInfo: {},
				step: [],
				imgpick: [],
				imgsign:[],
				stime: '',
				etime: '',
				status1: [0, 1, 2, 3, 4],
				status2: [3, 4],
				jt:''
			}
		},
		onLoad(options) {
			this.orderInfo = JSON.parse(options.data)
			let arr = this.orderInfo.expectePickTime.split("-");

			let s = moment(arr[0]).format(' HH:mm')
			let t = moment(arr[1]).format('HH:mm')
			let cglsj=moment(arr[1]).format('YYYY/MM/DD')

			let jts=moment(new Date()).format('YYYY/MM/DD')
			 console.log('jt',jts,cglsj)
			this.stime=s+'-'+t
			if(jts<cglsj){
				
				console.log('jt',jts,cglsj)
				this.jt='明天'
			}else if(jts==cglsj){
				this.jt='今天'
			}else{
				
				this.jt= moment(arr[1]).format('YYYY-MM-DD')
				console.log('jtz',jts,this.jt)
			}
			
			
			
			
			

		},
		watch: {
			onShareAppMessage() {
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 5,
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
		},
		onShareTimeline() {
			return {
				title: '超级货运',
				query: '/pages/index/index',
				imageUrl: 'https://shengxp.oss-cn-chengdu.aliyuncs.com/camelx/271a1457fe0b4e2b9ed9fd25b55fde62.png'
			}
		},
		onShow() {
			let array = []
			this.imgpick = JSON.parse(this.orderInfo.imgSignFor)
			this.imgsign= JSON.parse(this.orderInfo.imgPickUp)
			let sqjs=JSON.parse(this.orderInfo.actualQty)
			let ddgz = JSON.parse(this.orderInfo.extra1)
			for (let i = 0; i < ddgz.length; i++) {
				let arr = {}
				arr.title = ddgz[i]['statusCn']
				arr.desc = ddgz[i]['time']
				arr.status= ddgz[i]['status']
				if(sqjs>0){
					arr.sjqs=sqjs
				}
				array.unshift(arr)

			}
			if (array.length > 4) {
				this.step = array.slice(0, 4)
			} else {
				this.step = array
			}

		},
		methods: {
			alert0() {
				 this.vusui.photos({
				                title: true, //显示图片标题
				                number: true, //显示页码
				                content: [{
                    title: '网络图片',
                    src: 'https://vusui.github.io/img/reward.jpg'
                },{
                    title: '网络图片',
                    src: 'https://vusui.github.io/img/reward.jpg'
                },{
                    title: '网络图片',
                    src: 'https://vusui.github.io/img/reward.jpg'
                }] //图片数组
				            })
			},
			async cancleOrder() {
				let _that = this

				uni.showModal({
					title: '提示',
					content: '是否确定取消',
					success: async function(res) {
						if (res.confirm) {
							let res = await _that.$request.post(_that.$requestUrl.CANCLE_ORDER_URL, {
								data: {
									orderId: _that.orderInfo.id
								}
							});
							if (res) {
								uni.showToast({
									title: '已取消',
									icon: "success",
									duration: 2000
								});
								setTimeout(function() {
									uni.switchTab({
										url: '../order/order'
									});
								}, 2500);
							}
							_that.$api.msg(res || '系统繁忙，请稍后重试')

						} else if (res.cancel) {

						}
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		padding: 30rpx 24rpx 0;
		position: relative;
		height: 100vh;
	}

	.glp {}

	.deliver_info text {
		font-size: 32rpx;
		font-weight: bold;
		color: #2C2C2D;
		margin-bottom: 8rpx;
	}

	.main_up {
		padding: 24rpx 28rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		margin-bottom: 16rpx;
	}

	.go_name {
		margin-left: 20rpx;
		word-break: break-all;

	}

	.go_phone {
		margin-left: 16rpx;
	}

	.dizhi {
		margin: 8rpx 0 16rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #7B7B7B;
		letter-spacing: 1rpx;
	}

	.qhdz {
		font-size: 28rpx;

		font-weight: 400;
		color: #7B7B7B;
	}

	.line {
		width: 654rpx;
		height: 1rpx;
		box-sizing: border-box;
		background-color: #E9E9E9;
		margin-bottom: 8rpx;
	}

	.ddxx {
		font-size: 24rpx;
		font-weight: 400;
		color: #7B7B7B;
	}

	.ddxx .fl,
	.fr {
		height: 36rpx;
		line-height: 36rpx;
	}

	.main_mid {
		padding: 28rpx 28rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		margin: 16rpx 0;
	}

	.lines {
		width: 654rpx;
		height: 1rpx;
		box-sizing: border-box;
		background-color: #E9E9E9;
		margin: 26rpx 0;
	}

	.main_down {
		padding: 24rpx 28rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 130rpx;
	}

	.main_downs {
		padding: 24rpx 28rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 16rpx;
	}

	.ddgz {
		font-size: 28rpx;
		font-weight: bold;
		color: #2C2C2D;
	}

	.deliver_in {
		width: calc(100%);
		padding: 10rpx 0;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		background-color: #FFFFFF;
	}

	.deliver_in {
		position: fixed;
		bottom: 0;
		text-align: right;
		color: #FF690D;
		padding: 24rpx 28rpx;
		font-size: 32rpx;
		border-top: 1rpx solid #E9E9E9;
	}

	.qxdd {
		width: 176rpx;
		height: 64rpx;
		border-radius: 40rpx;
		border: 2rpx solid #979797 !important;
		font-size: 28rpx;
		font-weight: 400;
		color: #7B7B7B !important;
		line-height: 62rpx;

	}
</style>
